@php
    /** @var $carts \App\Model\Cart[] */
@endphp
@extends('home.app')

@section('title', 'Cart')

@section('content')
    <link rel="stylesheet" href="/css/cart.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/css/index-fab.css">
    <link rel="stylesheet" type="text/css" href="/css/index.css">
    <link rel="stylesheet" href="/css/global-index.css" media="all">
    <link rel="stylesheet" href="/css/site-index.css" media="all">
    <div class="container">

        <!--购物车为空-->
        <h4 class="text-center" id="empty-cart-text" style="padding-top:40px;display: none">
            Your shopping cart is empty
            <br>
            <br>
            <a href="goodsList.html">Continue shopping</a>
        </h4>

        <!--顶部购物车信息及按钮-->
        <div class="row" id="cart__header__row">
            <div class="col-xs-6">
                <div id="cart__header">
                    <b>Shopping Cart</b> ({{$count}} items): <b>${{$total}}</b>
                </div>
            </div>
            <div class="col-xs-6">
                <a href="/cart/checkout" class="cart__checkout-button__top">Continue to Checkout</a>
            </div>
        </div>
        @foreach ($carts as $cart)
            <div class="row cart__row">
                <!--商品图片-->
                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                    <a href="{{action('GoodsController@info', ['id' => $cart->goods->id])}}"
                       class="cart__product-image-link">
                        <img src="{{$cart->goods->getGoodsThumbUrl()}}" alt="{{$cart->goods->goods_name}}">
                    </a>
                </div>
                <!--商品信息-->
                <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
                    <a href="goodsDetails.html"
                       class="cart__product-name__link">
                        <h4 class="cart__product-name">{{$cart->goods->goods_name}}</h4>
                    </a>
                    <table class="cart__product-info-table">
                        <tbody>
                        <tr>
                            <td class="cart__product-info-table__option-name">Quantity:</td>
                            <td class="cart__product-info-table__option-value">{{$cart->number}}</td>
                        </tr>
                        <tr>
                            <td class="cart__product-info-table__option-name">Price:</td>
                            <td class="cart__product-info-table__option-value">${{$cart->goods->goods_price}}</td>
                        </tr>
                        <tr>
                            <td class="cart__product-info-table__option-name">Shipping:</td>
                            <td class="cart__product-info-table__option-value">${{ number_format($cart->goods->goods_price * $cart->number, 2) }}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div id="cart__remove-button__box">
                        <a id="cart__remove-button" data-id="{{$cart->id}}">Remove</a>
                    </div>
                </div>
            </div>
        @endforeach
        <!--单条商品盒子-->

        <div class="row">
            <div class="col-xs-12">
                <table id="cart__summary-table">
                    <tbody>
                    <tr>
                        <td class="cart__summary-table__option-name">Subtotal (1 items):</td>
                        <td class="cart__summary-table__option-value">{{$total}}</td>
                    </tr>
                    <tr>
                        <td class="cart__summary-table__option-name">Shipping:</td>
                        <td class="cart__summary-table__option-value">{{$shopping_price}}</td>
                    </tr>
                    <tr>
                        <td class="cart__summary-table__option-name">
                            <b>Total:</b>
                        </td>
                        <td class="cart__summary-table__option-value">
                            <b>${{$total + $shopping_price}}</b>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row bottom-continue-to-checkout-wrapper">
            <div class="col-xs-12 mb-30 mt-25">
                <a href="/cart/checkout" class="cart__checkout-button__bottom">Continue to
                    Checkout</a>
            </div>
        </div>


    </div>
    <script>
        $(function () {
            $("#cart__remove-button").click(function() {
                var id = $(this).attr('data-id');
                $.post('/cart/remove', {
                    id: id,
                    '_token': "{{ csrf_token()  }}"
                }, function(data) {
                    if (data.stauts === 'success') {
                        window.location.reload();
                    }
                })
            });
        })
    </script>
@endsection
